<template>
  <div class="Left">
    <i
      :class="inshow ? 'el-icon-s-unfold' : 'el-icon-s-fold'"
      class="Fold"
      @click="LeftShow"
    ></i>
    <div class="Left-one">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>后台管理系统</el-breadcrumb-item>
        <el-breadcrumb-item>{{ headTitel.meta.title }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="Right flex">
      <div class="Right-2">
        <img alt="" class="w-100 h-100 Img" src="@/assets/img/1.gif" />
      </div>
      <div class="flex Right-1">
        <el-dropdown trigger="click" @command="handleCommand">
          <span class="el-dropdown-link">
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="1" icon="el-icon-close"
              >退出
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
  </div>
</template>
<script>
import { loginAtuo } from "@/assets/js/login";

export default {
  props: ["headTitel"],
  data() {
    return {
      inshow: false,
    };
  },
  methods: {
    LeftShow() {
      this.inshow = !this.inshow;
      this.$emit("isShow", this.inshow);
    },
    handleCommand(command) {
      if (command === "1") {
        loginAtuo("").then((res) => {
          if (res.code === 200) {
            sessionStorage.clear(); //清除本地缓存
            this.$router.push({ path: "/" });
          }
        });
      }
    },
  },
};
</script>
<style scoped>
.Img {
  border-radius: 5px;
}

.Left {
  width: 100%;
  height: 49px;
  background: #ffffff;
  border-bottom: 1px solid #eeeeee;
}

.Left-one {
  float: left;
  padding-left: 10px;
  margin-top: 20px;
}

.Right {
  float: right;
  margin-right: 20px;
  width: 60px;
  height: 50px;
}

.Right-1 {
  width: 25px;
  height: 50px;
}

.Right-2 {
  width: 35px;
  height: 35px;
}

.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}

.el-icon-arrow-down {
  font-size: 12px;
}

.Fold {
  float: left;
  margin-top: 18px;
  padding-left: 10px;
  font-size: 20px;
  cursor: pointer;
}
</style>
